{include file='common/header'}

<div class="page-bar">
    {include file='common/nav'}
    {include file='common/action_button' submit='#btn_submit' reset='#btn_reset'}
</div>

<div class="row">
    <div class="col-md-12">
        <!-- BEGIN PORTLET-->
        <div class="portlet light form-fit ">
            <div class="portlet-body form">
                <!-- BEGIN FORM-->
                <form class="form-horizontal form-bordered ks-form">
                    <div class="form-body">
                        <div class="form-group">
                            <label class="control-label col-md-3">角色名称</label>
                            <div class="col-md-4">
                                <input class="form-control" type="text" name="name" required data-msg-required="请输入角色名称"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">排序</label>
                            <div class="col-md-4">
                                <input class="form-control" type="number" value="0" name="sort"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">状态</label>
                            <div class="col-md-4">
                                <div class="md-radio-inline">
                                    <div class="md-radio">
                                        <input type="radio" name="status" id="radio_status_1" value="1" class="md-radiobtn" checked>
                                        <label for="radio_status_1">
                                            <span></span>
                                            <span class="check"></span>
                                            <span class="box"></span> 启用
                                        </label>
                                    </div>
                                    <div class="md-radio">
                                        <input type="radio" id="radio_status_0" name="status" value="0" class="md-radiobtn">
                                        <label for="radio_status_0">
                                            <span></span>
                                            <span class="check"></span>
                                            <span class="box"></span> 禁用
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">管理权限</label>
                            <div class="col-md-4">
                                <div id="tree1"></div>
                                <input type="text" name="power" style="opacity: 0; position: absolute;" required data-msg-required="请选择权限"/>
                            </div>
                            
                        </div>
                    </div>
                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-offset-3 col-md-9">
                                <button type="button" class="btn green" id="btn_submit">
                                    <i class="fa fa-check"></i> 确认提交</button>
                                <button type="button" class="btn default ks-form-reset" id="btn_reset" onclick="$(this).resetForm()">重置</button>
                            </div>
                        </div>
                    </div>
                </form>
                <!-- END FORM-->
            </div>
        </div>
    </div>
</div>



{include file='common/footer'}
<!--递归树------------------------------------------------------开始-->
<link href="__ROOT__/static/assets/global/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" type="text/css"/>
<script src="__ROOT__/static/assets/global/plugins/jstree/dist/jstree.min.js" type="text/javascript"></script>
<script>
    $(function () {
        //初始化Tree
        $('#tree1').jstree({
            'plugins': ["checkbox"],
            'core': {
                'data': eval('{$list_menu}')
            }
        });

        //Tree加载完成后选中根菜单
        $("#tree1").on('loaded.jstree', function () {
            var id = ['0'];
            $(this).jstree(true).select_node(id);
        });

        //获取选中Tree的id
        $('#tree1').on('changed.jstree', function (e, data) {
            var ids = $(this).jstree(true).get_selected();
            console.log(ids);
            $("input[name='power']").val(ids);
        });
    })
</script>
<!--递归树-------------------------------------------------------结束-->
<!--表单提交事件-------------------------------------------------------开始-->
<script>
    $(function () {
        //JS表单验证
        var form = $('.ks-form');
        form.validate({
            errorClass: "ks-error-style"
        });

        //提交按钮事件
        $("#btn_submit").on('click', function () {
            if (form.valid()) {
                $(this).ajaxPost({
                    url: "{:url('system/admin_role_insert')}"
                })
            }
        })
    })
</script>
<!--表单提交事件-------------------------------------------------------结束-->